<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{padding:0;margin:0;}
        .content{
            position: relative;
            width:200px;
            height: 269px;
            margin: 100px auto;
            overflow: hidden;
        }
        .content #oul{
            position: absolute;
            left: 0;
            top: 0;
            width: 600px;
            height: inherit;
            z-index: 1;
        }
        .content li{
            float: left;
            width: 200px;
            height: 100%;
        }
        .content #oul:after{
            display: block;
            content: '';
            clear: both;
        }
        .content li img{
            width: 100%;
        }
        .nav{
            position: absolute;
            top:50%;
            margin-top: -20px;
            width: 40px;
            height: 40px;
            background-color: #ccc;
        }
        .nav.nav-left{
            left:10px;
        }
        .nav.nav-right{
            right:10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content">
            <ul id="oul">
                <li>
                    <img src="./img/0.jpg" alt="">
                </li>
                <li>
                    <img src="./img/1.jpg" alt="">
                </li>
                <li>
                    <img src="./img/2.jpg" alt="">
                </li>
            </ul>
        </div>
        <span class="nav nav-left"><</span>
        <span class="nav nav-right">></span>
    </div>
    <script type="text/javascript">

        (function(win, doc){
            var defaultConfig = {
                time:2000
            }
            var _timer
            var leftNav = document.querySelector('.nav-left')
            var rightNav = document.querySelector('.nav-right')
            var taSlide = function(options, ele){
                return new taSlide.fn.init(options, ele)
            }
            taSlide.fn = taSlide.prototype ={
                init:function(options, ele){
                    this.config = this.extend(defaultConfig, options)
                    this.play(ele)
                    return this
                },
                extend:function(options, others){
                    for(var key in others){
                        if(others.hasOwnProperty(key)){
                            options[key] = others[key]
                        }
                    }
                    return options
                },
                play:function(target){
                    var self = this
                    _timer = setInterval(function () {
                        self.move(target, -200)
                    }, this.config.time)
                },
                stop:function(){
                    return function(){
                        clearInterval(_timer)
                    }
                },
                move:function(ele, offset){
                    var newOffset = parseInt(ele.offsetLeft) + offset
                    ele.style.left = newOffset + 'px'

                    if (newOffset < -400) {
                        ele.style.left = 0
                    }
                    if (newOffset > 0) {
                        ele.style.left = -400 + 'px'
                    }
                },
                preBtn:function(){
                    var self = this
                    leftNav.addEventListener('click', function () {
                        self.move(target, 200)
                    }, false)
                },
                nextBtn:function(){
                    var self = this
                    rightNav.addEventListener('click', function () {
                        self.move(target, -200)
                    }, false)
                },
                initEvent:function(){
                    this.preBtn()
                    this.nextBtn()
                },
                enterSlider:function(){
                    target.addEventListener('mouseenter', function () {
                        self.stop()
                    }, false)
                },
                leaveSlider: function () {
                    target.addEventListener('mouseleave', function () {
                        self.play(target)
                    }, false)
                },
                addEvent:function(ele, event, callback){
                    ele.addEventListener(event, function () {
                        callback()
                    }, false)
                }
            }
            taSlide.fn.init.prototype = taSlide.fn
            taSlide.fn.initEvent()
            win.taSlide = taSlide
        })(window, document)

        var target = document.querySelector('#oul')
        var taSlide = taSlide({
            time: 3000
        }, target)

    </script>
</body>

</html>